<!-- 出账/编辑出账按钮 -->
<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="visible"
    width="800px"
    @close="resetForm"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="120px"
      size="medium"
    >
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item label="" :label-width="0">
            <el-button
              type="primary"
              @click="openRelationDialog"
              icon="el-icon-plus"
              size="small"
              style="margin: 0; margin-bottom: 10px"
            >
              关联报名信息
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 显示已关联的报名信息 -->
      <el-row v-if="selectedRegistrations.length > 0" :gutter="20">
        <el-col :span="24">
          <el-table :data="selectedRegistrations" border style="width: 100%">
            <el-table-column label="姓名" align="center" prop="studentName" />
            <el-table-column label="证件编号" align="center" prop="idNumber" />
            <el-table-column label="金额" align="center" prop="projectSum" />
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="removeRegistration(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="submitForm">出 账</el-button>
      <el-button type="success" @click="submitWithInvoice"
        >出账并合并开票</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "WithdrawalDialog",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "出账",
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      isloading: false,
      rules: {
        poolTransactionNum: [
          { required: true, message: "请输入交易号", trigger: "blur" },
        ],
        poolOutTime: [
          { required: true, message: "请选择出账时间", trigger: "change" },
        ],
        poolCounterparty: [
          { required: true, message: "请输入交易方信息", trigger: "blur" },
        ],
        poolAccount: [
          { required: true, message: "请输入交易方账号", trigger: "blur" },
        ],
        poolBank: [
          { required: true, message: "请输入交易银行", trigger: "blur" },
        ],
        poolOutAmount: [
          { required: true, message: "请输入出账金额", trigger: "blur" },
          { type: "number", message: "请输入有效数字", trigger: "blur" },
        ],
        poolRemark: [
          { required: false, message: "请输入转账备注", trigger: "blur" },
        ],
      },
      selectedRegistrations: [],
      relationDialogVisible: false,
    };
  },
  methods: {
    resetForm() {
      this.$refs["form"].resetFields();
      this.selectedRegistrations = [];
    },
    openRelationDialog() {
      this.relationDialogVisible = true;
      // 发送事件通知父组件打开关联对话框
      this.$emit("open-relation-dialog");
    },
    //处理关联信息
    handleRelationConfirm(selectedItems) {
      // 将选中的报名信息添加到当前表单中
      this.selectedRegistrations = selectedItems;

      this.relationDialogVisible = false;
    },
    removeRegistration(item) {
      this.selectedRegistrations = this.selectedRegistrations.filter(
        (reg) => reg.id !== item.id
      );
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 合并表单数据和关联的报名信息

          const finalData = {
            ...this.formData,
            registrations: this.selectedRegistrations,
          };
          this.$emit("submit", finalData);
          // this.visible = false;
          this.$emit("update:visible", false);
        }
      });
    },
    submitWithInvoice() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 合并表单数据和关联的报名信息
          const finalData = {
            ...this.formData,
            registrations: this.selectedRegistrations,
            invoiceType: "merge",
          };
          this.$emit("submit", finalData);
          // this.visible = false;
          this.$emit("update:visible", false);
        }
      });
    },
  },
};
</script>